<script setup lang="ts">
import type { render } from 'vue'
import parse from '@rojer/katex-mini'
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 定义 props 接收
const props = defineProps<{
  mathFormula: string
}>()
const renderedLatex = ref<string>('')
// 组件挂载完毕
// onMounted(() => {
//   console.log('子组件未渲染前：', props.mathFormula)
//   renderLatex()
//   console.log('子组件数学公式：', renderedLatex.value)
// })
// 页面加载
onLoad(async () => {
  // console.log('子组件未渲染前：', props.mathFormula)
  // renderLatex()
  // console.log('子组件数学公式：', renderedLatex.value)
})
const renderLatex = (mathFormula: string) => {
  console.log('子组件参数未渲染前：', mathFormula)
  renderedLatex.value = parse(mathFormula, {
    displayMode: true,
    globalGroup: true,
    throwOnError: false,
  })
  console.log('渲染后：', renderedLatex.value)
  return renderedLatex.value
}
</script>

<template>
  <view>
    <rich-text :nodes="renderLatex(props.mathFormula)"></rich-text>
  </view>
</template>

<style lang="scss"></style>
